<template>
  <div class="remark-manage">
    <div class="header">服务日志跟踪</div>
    <div class="content-body">
      <div class="body-box">
        <div class="search">
          <span>开始时间：</span>
          <el-date-picker
            v-model="formData.startDate"
            value-format="YYYY-MM-DD"
            type="date"
            placeholder="请选择开始时间"
            style="width: 150px"
          />
          <span>结束时间：</span>
          <el-date-picker
            v-model="formData.endDate"
            value-format="YYYY-MM-DD"
            type="date"
            placeholder="请选择结束时间"
            style="width: 150px"
          />
          <span class="ml10">接口名称：</span>
          <el-input
            v-model="formData.apiName"
            clearable
            placeholder="请输入接口名称"
            autocomplete="off"
            style="width: 150px"
          >
          </el-input>
          <span class="ml10">接口类型：</span>
          <el-select
            v-model="formData.apiType"
            placeholder="请选择接口类型"
            style="width: 150px"
            clearable
          >
            <el-option
              v-for="(item, index) in apiTypeData"
              :key="index"
              :value="item.apiType"
              :label="item.name"
            >
            </el-option>
          </el-select>
          <span class="ml10">使用者：</span>
          <el-input
            v-model="formData.apiUser"
            clearable
            placeholder="请输入使用人"
            autocomplete="off"
            style="width: 150px"
          >
          </el-input>
          <el-button type="primary" class="ml10" @click="initData">
            <el-icon class="el-icon--left">
              <Search />
            </el-icon>
            查询
          </el-button>
        </div>
        <div class="echarts">
          <div class="item item-num">
            <!-- <service-num-chart
              :x-labels="[
                '5/1',
                '5/6',
                '5/8',
                '5/10',
                '5/12',
                '5/14',
                '5/15',
                '5/16',
                '5/18',
                '5/26',
                '5/28',
                '5/30'
              ]"
              :y-values="[20, 12, 91, 24, 20, 30, 10, 20, 54, 90, 30, 41]"
            /> -->
            <service-num-chart :x-labels="stateData.accessDate" :y-values="stateData.accessNum" />
          </div>
          <div class="item item-state">
            <!-- <service-state-chart
              :x-labels="[
                '5/1',
                '5/6',
                '5/8',
                '5/10',
                '5/12',
                '5/14',
                '5/15',
                '5/16',
                '5/18',
                '5/26',
                '5/28',
                '5/30'
              ]"
              :success-values="[20, 12, 91, 24, 20, 30, 10, 20, 54, 90, 30, 41]"
              :failure-values="[2, 1, 9, 2, 2, 3, 1, 2, 5, 9, 2, 1]"
            /> -->
            <service-state-chart
              :x-labels="stateData.accessDate"
              :success-values="stateData.successNum"
              :failure-values="stateData.failNum"
            />
          </div>
        </div>
        <div class="table">
          <el-table :data="dataList" height="100%">
            <el-table-column prop="apiName" label="服务接口" align="center" />
            <el-table-column prop="apiType" label="请求类型" align="center">
              <template #default="{ row }">
                {{ row.apiType == 1 ? 'POST' : 'GET' }}
              </template>
            </el-table-column>
            <el-table-column prop="proName" label="服务接口类型" align="center" />
            <el-table-column prop="apiUser" label="使用方" align="center" />
            <el-table-column prop="accessTime" label="最新调用时间" align="center" />
          </el-table>
        </div>
        <div class="page">
          <el-pagination
            v-model:current-page="currentPage"
            :page-size="page.pageSize"
            background
            layout="total, prev, pager, next"
            :total="page.total"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, reactive } from 'vue'
import ServiceNumChart from '@/components/app-echart/service-num-chart.vue'
import ServiceStateChart from '@/components/app-echart/service-state-chart.vue'
import { getLogList, getlogStatistics } from '@/services/modules/external-service'
const currentPage = ref(1)
// const dataList = [
//   {
//     applyUse: '获取当前模型通讯健康状况',
//     buildPerson: 'GET',
//     buildTime: '新安江',
//     use: '联合调度四预报系统 ',
//     keybook: 'key:eyJdfdsdhbGciOiJSUzI1NiIsInR5',
//     updateTime: '2022/12/8'
//   },
//   {
//     applyUse: '获取数据类型列表',
//     buildPerson: 'GET',
//     buildTime: '新安江',
//     use: '联合调度四预报系统 ',
//     keybook: 'key:edsadsayJhbGciOiJSUzI1NiIsInR5',
//     updateTime: '2022/12/8'
//   },
//   {
//     applyUse: '获取模型类型列表',
//     buildPerson: 'GET',
//     buildTime: '新安江',
//     use: '联合调度四预报系统 ',
//     keybook: 'key:eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9',
//     updateTime: '2022/12/8'
//   },
//   {
//     applyUse: '获取流域信息',
//     buildPerson: 'GET',
//     buildTime: '新安江',
//     use: '联合调度四预报系统 ',
//     keybook: 'key:3231GciOiJSUzI1NiIsInR5cCI6IkpXVCJ9',
//     updateTime: '2022/12/8'
//   },
//   {
//     applyUse: '获取基面信息',
//     buildPerson: 'GET',
//     buildTime: '新安江',
//     use: '联合调度四预报系统 ',
//     keybook: 'key:eyJdsadhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9',
//     updateTime: '2022/12/8'
//   },
//   {
//     applyUse: '获取模型要素列表',
//     buildPerson: 'GET',
//     buildTime: '新安江',
//     use: '联合调度四预报系统 ',
//     keybook: 'key: eyaaddJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9',
//     updateTime: '2022/12/8'
//   },
//   {
//     applyUse: '获取设计降雨信息',
//     buildPerson: 'GET',
//     buildTime: '新安江',
//     use: '联合调度四预报系统 ',
//     keybook: 'key:dsadaseyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9',
//     updateTime: '2022/12/8'
//   },
//   {
//     applyUse: '获取预制输出项列表',
//     buildPerson: 'GET',
//     buildTime: '新安江',
//     use: '联合调度四预报系统 ',
//     keybook: 'key:fdfyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9',
//     updateTime: '2022/12/8'
//   }
// ]
// 接口类型
const apiTypeData = reactive([
  { name: 'POST', apiType: 1 },
  { name: 'GET', apiType: 2 }
])
const formData = reactive({
  pageNum: 1,
  pageSize: 10,
  apiName: '',
  apiUser: '',
  apiType: '',
  startDate: '',
  endDate: ''
})
let page = reactive({
  pageNum: 1, //当前页
  pageSize: 10, //每页条目数
  total: 0 // 记录总数
})
const dataList = ref([])
onMounted(() => {
  // acceptLogList()
  // 获取日期格式
  handleTimeData()
  // 获取统计图数据
  // acceptLogStatistics()
})
// 查询
function initData() {
  acceptLogList()
  acceptLogStatistics()
}
// 切换页码
function handleCurrentChange(val) {
  currentPage.value = val
  formData.pageNum = val
  acceptLogList()
}
function handleTimeData() {
  // 获取当前日期
  let currentDate = new Date()
  // 获取30天之前的日期
  let thirtyDaysAgo = new Date()
  thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30)
  // 将日期格式化为YYYY-MM-DD格式
  formData.endDate = currentDate.toISOString().slice(0, 10)
  formData.startDate = thirtyDaysAgo.toISOString().slice(0, 10)
  // 获取列表数据
  acceptLogList()
  // 获取统计图数据
  acceptLogStatistics()
}
// 获取列表
function acceptLogList() {
  getLogList(formData).then((res) => {
    if (res.code == 200) {
      dataList.value = res.data.list
      page.total = res.data.totalRow
    }
  })
}
const stateData = reactive({
  // 失败次数
  failNum: [],
  // 访问日期
  accessDate: [],
  // 成功次数
  successNum: [],
  // 访问次数
  accessNum: []
})
// 获取统计数据
function acceptLogStatistics() {
  stateData.failNum = []
  stateData.accessDate = []
  stateData.successNum = []
  stateData.accessNum = []
  getlogStatistics(formData).then((res) => {
    if (res.code == 200) {
      res.data.forEach((e) => {
        // 失败次数
        stateData.failNum.push(e['failNum'])
        // 访问日期
        stateData.accessDate.push(e['accessDate'])
        // 成功次数
        stateData.successNum.push(e['successNum'])
        // 访问次数
        stateData.accessNum.push(e['accessNum'])
      })
    }
  })
}
</script>
<style lang="less" scoped>
.remark-manage {
  height: 100%;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    padding-left: 20px;
    border-bottom: 1px solid var(--border-primary);
    font-size: var(--header-fontsize);
    font-weight: 700;
    box-sizing: border-box;
  }

  .content-body {
    height: calc(100% - 50px);
    padding: 10px;
    box-sizing: border-box;

    .body-box {
      display: flex;
      flex-direction: column;
      height: 100%;
      border: 1px solid var(--border-primary);
      border-radius: 10px;
      box-sizing: border-box;

      .search {
        height: 50px;
        line-height: 50px;
        padding: 0 10px;
      }

      .echarts {
        display: flex;
        height: 300px;

        .item {
          flex: 1;
        }
      }

      .table {
        flex: 1;
        overflow-y: auto;
      }

      .page {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        height: 50px;
      }
    }
  }
}
</style>
